<template>
    <!-- 轮播图管理 -->
    <div class="caiwubaobiao">
        <!--        <div class="cwbb-time">更新时间：2023-12-25 14:25:35</div>-->
        <div class="zcj-box">
            <div class="zcj-title">总成交（统计为总订单数据、金额、付款后退单和退单总金额）</div>
            <div class="zcj-list">
                <div class="zcj-l">
                    <div>总订单数</div>
                    {{ totalData.total_count }}
                </div>
                <div class="zcj-l">
                    <div>总成交额</div>
                    {{ totalData.total_book_money }}
                </div>
                <div class="zcj-l">
                    <div>退单数</div>
                    {{ totalData.total_back_count }}
                </div>
                <div class="zcj-l">
                    <div>退单总金额</div>
                    {{ totalData.total_back_money }}
                </div>
            </div>
        </div>
        <div class="zcj-box">
            <div class="zcj-title">今日关键指标</div>
            <div class="zcj-list">
                <div class="zcj-l">
                    <div>下单数</div>
                    {{ totalData.today_count }}
                </div>
                <div class="zcj-l">
                    <div>下单总金额</div>
                    {{ totalData.today_book_money }}
                </div>
                <div class="zcj-l">
                    <div>支付订单数</div>
                    {{ totalData.today_pay_count }}
                </div>
                <div class="zcj-l">
                    <div>实际成交额</div>
                    {{ totalData.today_pay_book_money }}
                </div>
                <div class="zcj-l">
                    <div>实际支付金额</div>
                    {{ totalData.today_pay_money }}
                </div>
                <div class="zcj-l">
                    <div>实际支付积分金额</div>
                    {{ totalData.today_pay_point }}
                </div>
                <div class="zcj-l">
                    <div>今日退款金额</div>
                    {{ totalData.today_back_money }}
                </div>
                <div class="zcj-l">
                    <div>今日销课数</div>
                    {{ totalData.today_used_num }}
                </div>
                <div class="zcj-l">
                    <div>今日销课金额</div>
                    {{ totalData.today_used_money }}
                </div>
                <div class="zcj-l">
                    <div>今日待销课数</div>
                    {{ totalData.today_unused_num }}
                </div>
                <div class="zcj-l">
                    <div>今日待销课金额</div>
                    {{ totalData.today_unused_money }}
                </div>
            </div>
        </div>
        <div class="zcj-box">
            <div class="zcj-title">经营概况
                <div class="one">
                    <el-date-picker
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        v-model="form.date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
                <div class="five">门店：
                    <el-select v-model="form.store_id" placeholder="请选择" filterable>
                        <el-option label="全部" value=""></el-option>
                        <el-option
                            v-for="item in storeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="two">
                    <el-button type="warning" @click="submitForm">查询</el-button>
                </div>
            </div>
            <div class="tables">
                <el-table border :data="tableData"
                          :summary-method="getSummaries"
                          show-summary
                          max-height="330" highlight-current-row :row-style="{height: '20px'}"
                          :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                    <el-table-column prop="date" align="center" label="日期"></el-table-column>
                    <el-table-column prop="store_name" align="center" label="门店"></el-table-column>
                    <el-table-column prop="order_count" align="center" label="下单数"></el-table-column>
                    <el-table-column prop="book_money" align="center" label="下单金额"></el-table-column>
                    <el-table-column prop="pay_count" align="center" label="支付订单数"></el-table-column>
                    <el-table-column prop="pay_book_money" align="center" label="实际成交额"></el-table-column>
                    <el-table-column prop="pay_money" align="center" label="实际支付金额"></el-table-column>
                    <el-table-column prop="pay_point" align="center" label="实际积分支付金额"></el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page.sync="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
                                   layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import {isEmpty} from "lodash/lang";

export default {
    name: "banner",
    data() {
        return {
            form: {
                date: [],
                store_id: '',

            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            dataTotal: {
                order_count: 0,
                book_money: 0,
                pay_count: 0,
                pay_book_money: 0,
                pay_money: 0,
                pay_point: 0,


            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value: '',
            storeList: [{
                id: 1,
                value: '选项1',
                label: '黄金糕',
                name: 'xx'
            }],
            value2: '',
            totalData: {
                total_count: 0,
                total_book_money: 0,
                total_back_count: 0,
                total_back_money: 0,
                today_count: 0,
                today_book_money: 0,
                today_pay_count: 0,
                today_pay_book_money: 0,
                today_pay_money: 0,
                today_pay_point: 0,
                today_back_money: 0,
                today_used_num:0,
                today_used_money:0,
                today_unused_num:0,
                today_unused_money:0,

            },
            page: 1, //默认第一页
            limit: 10, //默认一页显示10条数据
            total: 0,
        };
    },
    created() {
        this.getTotal();
        this.getTotalList();
        this.getStoreList();
    },
    activated() {
        this.getTotal();
        this.getTotalList();
        this.getStoreList();
    },

    methods: {

        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getTotalList();
        },
        handleCurrentChange(index) {
            this.page = index;
            this.getTotalList();
        },
        getStoreList() {
            let params = {
                status: 1,
                page: 1,
                per_page: 10000,
            };
            this.$get(this.$api.storeApi, params).then((res) => {
                if (res.code == 200) {
                    this.storeList = res.data.data;
                } else {
                    return this.$message.error(res.msg);
                }
            });

        },
        submitForm() {
            this.page = 1;
            this.per_page = 10;
            this.getTotalList();

        },
        getTotal() {
            let params = {};
            this.$post(this.$api.totalApi, params).then((res) => {
                if (res.code == 200) {
                    this.totalData = res.data;
                    // console.log('totalData', this.totalData)
                } else {
                    return this.$message.error(res.msg);
                }
            });

        },
        getTotalList() {
            let params = {
                page: this.page,
                per_page: this.per_page,
                date: !isEmpty(this.form.date) ? this.form.date : [],
                store_id: this.form.store_id,
            };
            this.$post(this.$api.totalListApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                    this.dataTotal = res.data.dataTotal;

                } else {
                    return this.$message.error(res.msg);
                }
            });

        },
        getSummaries(param) {
            const sums = [];
            sums[0] = '总计';
            sums[2] = this.dataTotal.order_count;
            sums[3] = this.dataTotal.book_money;
            sums[4] = this.dataTotal.pay_count;
            sums[5] = this.dataTotal.pay_book_money;
            sums[6] = this.dataTotal.pay_money;
            sums[7] = this.dataTotal.pay_point;
            return sums;
        },

    },
};
</script>

<style scoped>
.zcj-box {
    margin: 15px 0;
    background-color: #fff;
    box-shadow: 5px 5px 15px #c0c0c0;
}

.zcj-title {
    background-color: #868686;
    color: #fff;
    padding: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
}

.zcj-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.zcj-l {
    border-right: 2px solid #c9c9c9;
    width: 25%;
    text-align: center;
    font-size: 36px;
    padding-bottom: 50px;

}

.zcj-l:last-child {
    border-right: none;
}

.zcj-l div {
    text-align: left;
    padding: 20px 30px;
    font-weight: bold;
    font-size: 18px;
    color: #555;
}

.one {
    position: absolute;
    right: 420px;
}

.two {
    position: absolute;
    right: 15px;
}

.five {
    position: absolute;
    right: 100px;
}

.pagination {
    text-align: center;
}
</style>
